<!-- 预售中心  -->
<template>
	<s-layout :bgStyle="{ color: '#f2f2f2' }" title="商品预售列表">
		<s-empty
				v-if="state.pagination.total === 0"
				icon="/static/coupon-empty.png"
				text="暂无预售"
		></s-empty>
		<view v-for="item in state.pagination.data" :key="item.id" class="item">
			<image :src="sheep.$url.static(item.logo)" class="banner" @click="toGoodsList(item)"/>
			<view class="bottom">
				<view class="left">
					<text class="title">专题：{{ item.name }}</text>
				</view>
				<view class="right">
					<button class="ss-reset-button" style="width: 120rpx" @tap="toGoodsList(item)">进入</button>
				</view>
			</view>
		</view>

		<uni-load-more
				v-if="state.pagination.total > 0"
				:content-text="{
        contentdown: '上拉加载更多',
      }"
				:status="state.loadStatus"
				@tap="loadmore"
		/>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {onLoad, onReachBottom} from '@dcloudio/uni-app';
import {reactive} from 'vue';
import _ from 'lodash';

const pagination = {
	data: [],
	current_page: 1,
	total: 1,
	last_page: 1,
};
// 数据
const state = reactive({
	currentTab: 0,
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	loadStatus: '',
	type: '',
});

const tabMaps = [
	{
		name: '领券中心',
		value: 'all',
	},
	{
		name: '已领取',
		value: 'geted',
	},
	{
		name: '已使用',
		value: 'used',
	},
	{
		name: '已失效',
		value: 'expired',
	},
];

function onTabsChange(e) {
	state.pagination = pagination
	state.currentTab = e.index;
	state.type = e.value;
	if (state.currentTab == 0) {
		getData();
	} else {
		getCoupon();
	}
}

async function getData(page = 1, list_rows = 5) {
	state.loadStatus = 'loading';
	const res = await sheep.$api.goods.preGoodsList({list_rows, page});
	let preList = res;
	state.pagination = {
		...res,
		data: preList,
	};
	if (state.pagination.current_page < state.pagination.last_page) {
		state.loadStatus = 'more';
	} else {
		state.loadStatus = 'noMore';
	}
}

function toGoodsList(item) {
	sheep.$router.go('/pages/goods/preGoodsList',
			{
				brandId: item.id,
				brandName: item.name,
				brandLogo: item.logo
			}
	)
}

async function getCoupon(page = 1, list_rows = 5) {
	state.loadStatus = 'loading';
	let res = await sheep.$api.coupon.userCoupon({
		type: state.type,
		list_rows,
		page,
	});
	if (res.error === 0) {
		if (page >= 2) {
			let preList = _.concat(state.pagination.data, res.data.data);
			state.pagination = {
				...res.data,
				data: preList,
			};
		} else {
			state.pagination = res.data;
		}
		if (state.pagination.current_page < state.pagination.last_page) {
			state.loadStatus = 'more';
		} else {
			state.loadStatus = 'noMore';
		}
	}
}

async function getBuy(id) {
	const {error, msg} = await sheep.$api.coupon.get(id);
	if (error === 0) {
		uni.showToast({
			title: msg,
		});
		setTimeout(() => {
			state.pagination = pagination
			getData();
		}, 1000);
	}
}

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		if (state.currentTab == 0) {
			getData(state.pagination.current_page + 1);
		} else {
			getCoupon(state.pagination.current_page + 1);
		}
	}
}

onLoad((Option) => {
	if (Option.type === 'all' || !Option.type) {
		getData();
	} else {
		state.type = Option.type;
		Option.type === 'geted'
				? (state.currentTab = 1)
				: Option.type === 'used'
						? (state.currentTab = 2)
						: (state.currentTab = 3);
		getCoupon();
	}
});
onReachBottom(() => {
	loadmore();
});
</script>
<style lang="scss" scoped>

.bottom {
	display: flex;
	justify-content: space-between;
	padding: 10rpx;

	.left {
		display: flex;
		align-items: center;
		padding: 20rpx;
		font-weight: 400;
		color: #d27d7d;
	}

	.right {
		display: flex;
		align-items: center;
		color: #d27d7d;
	}
}

.item {
	width: 95%;
	margin-left: 2.5%;
	border-radius: 20rpx;
	background: #fff;
	margin-top: 30rpx;
	box-shadow: 1px 1px 50px #ffffff;
}

.banner {
	width: 97%;
	margin-left: 1.5%;
	margin-top: 10rpx;
	border-radius: 10rpx;
	height: 220rpx;
	box-shadow: 1px 1px 50px #cccccc
}
</style>
